JavaScript Nullish Coalescing: Defaultwertzuweisung meistern

JavaScript-Entwickler müssen oft Defaultwerte zuweisen, wenn eine Variable null oder undefiniert ist. Vor ES2020 war der logische ODER-Operator (||) die primäre Methode, um dies zu erreichen. Die Einführung des Nullish Coalescing Operators (??) bietet jedoch eine präzisere und zuverlässigere Lösung. Dieser umfassende Leitfaden untersucht die Nuancen von Nullish Coalescing, seine Vorteile und praktische Beispiele, die Ihnen helfen, diese leistungsstarke Funktion zu meistern.

Grundlegendes zu Nullish Coalescing (??)

Der Nullish Coalescing Operator (??) ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operand null oder undefined ist. Andernfalls gibt er seinen linken Operanden zurück.

Syntax:

            leftOperand ?? rightOperand
            

              
                Copy
              
            
          

Hauptunterschied zum logischen ODER (||):

Der logische ODER-Operator (||) gibt den rechten Operanden zurück, wenn der linke Operand ein beliebiger falscher Wert ist (null, undefined, 0, '', NaN, false). Dies kann zu unerwartetem Verhalten führen, wenn Sie beabsichtigen, nur null- oder undefined-Werte zu behandeln.

Warum Nullish Coalescing verwenden?

Nullish Coalescing bietet mehrere Vorteile gegenüber dem traditionellen logischen ODER-Operator:

• Präzision: Es zielt speziell auf null und undefined ab und vermeidet unbeabsichtigte Defaultzuweisungen für andere falsche Werte.
• Lesbarkeit: Es kommuniziert klar die Absicht, nur null- oder undefined-Fälle zu behandeln, was die Wartbarkeit des Codes verbessert.
• Sicherheit: Es verhindert unerwartetes Verhalten, das durch falsche Werte verursacht wird, die unbeabsichtigt Defaultzuweisungen auslösen.

Praktische Beispiele

1. Grundlegende Defaultwertzuweisung

Zuweisen eines Defaultwerts zu einer Variablen, wenn sie null oder undefined ist:

            const userName = user.name ?? 'Gast';
console.log(userName); // Ausgabe: 'Gast', wenn user.name null oder undefiniert ist, ansonsten der tatsächliche Benutzername
            

              
                Copy
              
            
          

2. Umgang mit API-Antworten

Abrufen von Daten von einer API und Bereitstellen eines Defaultwerts, wenn in der Antwort eine bestimmte Eigenschaft fehlt:

            const apiResponse = {
  data: {
    city: null,
  },
};

const cityName = apiResponse.data.city ?? 'Unbekannte Stadt';
console.log(cityName); // Ausgabe: 'Unbekannte Stadt'
            

              
                Copy
              
            
          

3. Defaultkonfigurationen

Festlegen von Defaultkonfigurationsoptionen für eine Komponente oder ein Modul:

            const config = {
  theme: userSettings.theme,
  animationSpeed: userSettings.animationSpeed ?? 'normal',
};

console.log(config.animationSpeed); // Ausgabe: 'normal', wenn userSettings.animationSpeed null oder undefiniert ist
            

              
                Copy
              
            
          

4. Umgang mit Benutzereinstellungen

Ermöglichen Sie Benutzern, Einstellungen anzupassen und Defaultwerte bereitzustellen, wenn sie keine Präferenz angegeben haben:

            let userVolume = localStorage.getItem('volume'); //kann null zurückgeben
let volume = userVolume ?? 0.5; // setze eine Standardlautstärke von 0.5

console.log(`Benutzerlautstärke ist ${volume}`);
            

              
                Copy
              
            
          

5. Verketten von Nullish Coalescing

Sie können den Nullish Coalescing Operator verketten, um eine Kaskade von Defaultwerten bereitzustellen:

            const setting = userSetting.displaySetting.theme ?? defaultSettings.theme ?? 'light';
console.log(setting); // Ausgabe: Der erste Nicht-Null/Nicht-undefinierte-Wert aus der Kette
            

              
                Copy
              
            
          

6. Arbeiten mit Funktionen

Zuweisen einer Defaultfunktion, wenn die bereitgestellte Funktion null oder undefiniert ist:

            const logMessage = logger.log ?? (() => console.log('Kein Logger verfügbar.'));
logMessage('Dies ist eine Testnachricht.');
            

              
                Copy
              
            
          

Nullish Coalescing mit Optional Chaining

Der Nullish Coalescing Operator lässt sich perfekt mit Optional Chaining (?.) kombinieren, sodass Sie sicher auf verschachtelte Eigenschaften zugreifen können, ohne Fehler zu verursachen, wenn eine Zwischeneigenschaft null oder undefined ist.

Beispiel:

            const user = {
  profile: {
    address: {
      city: null,
    },
  },
};

const cityName = user?.profile?.address?.city ?? 'Unbekannte Stadt';
console.log(cityName); // Ausgabe: 'Unbekannte Stadt'
            

              
                Copy
              
            
          

In diesem Beispiel wird, wenn eine der Eigenschaften (user, profile, address oder city) null oder undefined ist, das Optional Chaining kurzgeschlossen, und der Nullish Coalescing Operator gibt den Defaultwert 'Unbekannte Stadt' zurück.

Häufige Anwendungsfälle in globalen Anwendungen

Betrachten Sie diese internationalen Szenarien, in denen Nullish Coalescing besonders nützlich sein kann:

• Lokalisierung: Bereitstellung von Defaultübersetzungen basierend auf dem Gebietsschema des Benutzers. Wenn für eine bestimmte Sprache keine Übersetzung verfügbar ist, kann ein Fallback auf eine Defaultsprache (z. B. Englisch) implementiert werden.
• Währungsformatierung: Anzeigen von Währungswerten mit entsprechender Formatierung basierend auf der Region des Benutzers. Wenn die regionalen Einstellungen nicht verfügbar sind, kann ein Defaultwährungsformat angewendet werden.
• Datums- und Zeitformatierung: Formatieren von Datums- und Uhrzeitangaben gemäß dem Gebietsschema des Benutzers. Wenn die Gebietsschema-Informationen fehlen, kann ein Defaultdatums- und -zeitformat verwendet werden.
• Adressformatierung: Anzeigen von Adressinformationen im richtigen Format für verschiedene Länder. Wenn das Land nicht angegeben ist, kann ein Defaultadressformat verwendet werden.

Beispiel: Lokalisierungs-Fallback

            const translatedText = localizedStrings[userLocale]?.greeting ?? localizedStrings['en-US'].greeting ?? "Hallo!";
console.log(translatedText);
            

              
                Copy
              
            
          

Bewährte Methoden

• Verwenden Sie ?? für null/undefined-Prüfungen: Bevorzugen Sie ?? gegenüber ||, wenn Sie speziell null- oder undefined-Werte behandeln möchten.
• Kombinieren Sie es mit Optional Chaining: Verwenden Sie ?? in Verbindung mit Optional Chaining (?.), um sicher auf verschachtelte Eigenschaften zuzugreifen.
• Vermeiden Sie unnötige Komplexität: Halten Sie Ihren Code sauber und lesbar, indem Sie ?? nur verwenden, wenn es einen klaren Vorteil bietet.
• Berücksichtigen Sie die Browserkompatibilität: Stellen Sie sicher, dass Ihre Zielbrowser den Nullish Coalescing Operator (ES2020) unterstützen. Wenn Sie ältere Browser unterstützen müssen, verwenden Sie einen Transpiler wie Babel.
• Code Reviews: Fördern Sie Code Reviews, um die korrekte Verwendung des Nullish Coalescing Operators sicherzustellen, insbesondere in großen internationalen Projekten, in denen Fehlinterpretationen von falschen Werten erhebliche Auswirkungen haben können.

Browserkompatibilität

Der Nullish Coalescing Operator ist eine relativ neue Funktion in JavaScript (ES2020). Stellen Sie sicher, dass Ihre Zielbrowser ihn unterstützen, oder verwenden Sie einen Transpiler wie Babel, um Kompatibilität für ältere Browser bereitzustellen. Berücksichtigen Sie die Nutzungsdemografie Ihrer Anwendung. Beispielsweise kann ein Projekt, das sich an Benutzer in Ländern mit langsamerer Technologieeinführung richtet, möglicherweise eine stärkere Transpilierung erfordern als eines, das sich an Benutzer in technologieorientierten Regionen richtet.

Zu vermeidende Fallstricke

• Mischen von ?? und || mit &&: Wenn Sie den Nullish Coalescing Operator (??) oder den logischen ODER-Operator (||) mit dem logischen UND-Operator (&&) ohne explizite Klammern kombinieren, wirft JavaScript einen Syntaxfehler. Verwenden Sie immer Klammern, um die Reihenfolge der Operationen zu verdeutlichen.
• Verwechseln von ?? mit ||: Denken Sie an den entscheidenden Unterschied: ?? prüft nur auf null und undefined, während || auf jeden falschen Wert prüft.

Beispiel für Fallstrick 1 (Syntaxfehler):

            // Dies wirft einen SyntaxError:
// const value = a ?? b && c;

// Korrekte Vorgehensweise (mit Klammern):
const value = a ?? (b && c);
const value2 = (a ?? b) && c;
            

              
                Copy
              
            
          

Alternativen zu Nullish Coalescing (für ältere Browser)

Wenn Sie ältere Browser unterstützen müssen, die den Nullish Coalescing Operator nicht unterstützen, können Sie die folgenden Alternativen verwenden:

• Logischer ODER-Operator (||): Wie bereits erwähnt, ist dies der traditionelle Ansatz. Beachten Sie jedoch das Problem des falschen Werts.
• Ternärer Operator: Eine ausführlichere, aber explizite Möglichkeit, auf null oder undefined zu prüfen.

Beispiel: Ternärer Operator

            const value = a === null || a === undefined ? defaultValue : a;
            

              
                Copy
              
            
          

Schlussfolgerung

Der Nullish Coalescing Operator (??) ist eine wertvolle Ergänzung der JavaScript-Sprache und bietet eine präzisere und lesbarere Möglichkeit, Defaultwertzuweisungen beim Umgang mit null- oder undefined-Werten zu handhaben. Durch das Verständnis seiner Vorteile und Nuancen können Sie saubereren, sichereren und wartungsfreundlicheren Code schreiben. Die Kombination mit Optional Chaining verbessert Ihre Fähigkeit, komplexe Datenstrukturen auf elegante Weise zu verarbeiten. Wenn Sie Anwendungen für ein globales Publikum erstellen, berücksichtigen Sie die Auswirkungen von Null- und Undefined-Werten in verschiedenen kulturellen und regionalen Kontexten und nutzen Sie Nullish Coalescing, um eine konsistente und benutzerfreundliche Erfahrung für alle zu bieten.